<template lang="">
  <div class="">
    <product-list
      :title="name"
      :list="list"
      @tap="onNavTo"
    />
  </div>
</template>

<script>
import ProductList from './public/ProductList.vue';
import Goods from '../api/goods/goods';
export default {
  components: {
    ProductList
  },

  data() {
    return {
      name: '',
      list: []
    };
  },

  mounted() {
    const {id, name} = this.$route.query;
    this.name = name;
    this.init(id);
  },

  methods: {

    async init(classId) {

      const list = await Goods.getGoodsList(classId);

      this.list = list.map(el => {
        const {id, name, images} = el;
        const [imgSrc] = images.split(',');
        return {
          id,
          name,
          imgSrc
        };
      })
    },

    onNavTo(e) {
      const {id} = e.item;
      this.$router.push({
        path: '/detail',
        query: {id}
      })
    },

  }

}
</script>

<style lang="css" scoped>
</style>
